<template>
  <el-container>
    <el-header>
      <h2>邵阳影院</h2>
      <div class="bar">
        <el-menu mode="horizontal" router>
            <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id">{{ item.name }}</el-menu-item>
        </el-menu>
      </div>
      <div class="search-bar">
        <el-input></el-input>
        <span>搜索</span>
      </div>
    </el-header>
    <router-view></router-view>
    <!-- <el-container>
        <el-aside>
            <el-menu></el-menu>
        </el-aside>
        <el-main>

        </el-main>
    </el-container> -->
  </el-container>
</template>


<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { GetMovieList } from '../api/index.js'
 onMounted(async()=>{
  const res = await GetMovieList()
  console.log(res)
 })
 const menuList = ref([
    {id:1,name:'首页',path:'index'},
    {id:2,name:'榜单',path:'rank'},
    {id:3,name:'影片',path:'movie'},
    {id:4,name:'关于',path:'about'}
    ])
</script>

<style lang="scss" scoped>
.el-container{
    .el-header{
        display: flex;
    }
}
</style>